<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<title>13-新浪微博</title>
		<style type="text/css">
			*
			{
				margin:0;
				padding: 0;
			}
			html,body
			{
				width: 100%;
				height:100%;
			}
			body
			{
				background:url(images/body_bg.jpg) no-repeat center 0;
			}
			.nav
			{
				width:100%;
				height:48px;
			}
			.nav>img
			{
				width:100%;
				height: auto;
			}
			.content
			{
				width:1000px;
				height: auto;
				overflow:hidden;
				background: #ebdbd4;
				margin:0px auto;
				margin-top: 200px;
				padding-bottom: 30px;
			}
			.content>.left
			{
				float:left;
				width:150px;
			}
			.content>.right
			{
				float:right;
				width:240px;
			}
			.content>.center
			{
				float:left;
				width:600px;
				height:168px;
				background: url(images/comment.png) no-repeat 0 0;
				background-size:600px 168px;
			}
			.center>.comment
			{
				width:570px;
				height:73px;
				margin-top: 45px;
				margin-left: 15px;
				resize: none;
				border: none;
				outline: none;
			}
			.center>.send
			{
				width:82px;
				height: 30px;
				margin-top: 4px;
				margin-left: 506px;
				border: none;
				background: #999999;
				color: #fff;
			}
			.center>.send_no{ 
				background:#FD8040;
				cursor:pointer;
				}
			.content>.messageList
			{
				width:600px;
				height:auto;
				overflow: hidden;
				background: #fff;
				float: left;
			}
			
			.messageList>.info
			{
				padding: 10px 20px;
				border-bottom: 2px solid #ccc;
			}
			.info>.infoText
			{
				line-height: 25px;
				margin-bottom: 10px;
				
			}
			.info>.infoOperation
			{
				width:100%;
				overflow: hidden;
			}
			.infoOperation>.infoTime
			{
				float: left;
				font-size: 13px;
				color: #ccc;
			}
			.infoOperation>.infoHandle
			{
				float: right;
				font-size: 13px;
			}
			.infoOperation>.infoHandle a
			{
				text-decoration: none;
				color: #ccc;
				background:url(images/icons.png) no-repeat 0 0;
				padding-left: 30px;
				margin-left: 10px;
			}
			.infoOperation>.infoHandle a:nth-child(2)
			{
				background-position: 0 -17px;
			}
			.infoOperation>.infoHandle a:nth-child(3)
			{
				background-position: 0 -34px;
			}
			
			.page
			{
				width:1000px;
				height: 40px;
				background: #ff5500;
				overflow: hidden;
				margin: 0 auto;
				text-align: center;
				line-height: 40px;
				box-sizing: border-box;
			}
			.page>a
			{
				color: #fff;
				text-decoration: none;
				width: 20px;
				height: 20px;
				border: 1px solid #ccc;
				text-align: center;
				line-height: 20px;
				padding-left: 10px;
				padding-right: 10px;
				margin-left: 10px;
				margin-right: 10px;
			}
			.page>a:hover
			{
				background: #FD8040;
			}
		</style>
		<!-- <script type="text/javascript" src="js/jquery-1.12.4.js"></script> -->
		<script type="text/javascript">
			
		
		</script>
	</head>
	<body>

			<div class="nav">
				<img src="images/nav.png" />
			</div>
		
			<div class="content">
				<img src="images/left.png" class="left">
				<div class="center">
					<textarea class="comment"></textarea>
					<input type="button" value="发布" class="send" disabled />
				</div>
				<img src="images/right.png" class="right">
				
				<div class="messageList">
					<div class="info">
						<p class="infoText">【腾讯微视短视频获重磅更新:打通QQ音乐曲库】昨天晚上，腾讯对旗下短视频应用微视进行了大版本更新，安卓版直接升级到了4.0版本。此次更新推出了视频跟拍、歌词字幕、一键美型等三大功能......
</p>
						<p class="infoOperation">
							<span class="infoTime">2018-4-3 21:30:23</span>
							<span class="infoHandle">
								<a href="javascript:;" class="infoTop">0</a>
								<a href="javascript:;" class="infoDown">0</a>
								<a href="javascript:;" class="infoDel">删除</a>
							</span>
							</p>
					</div>
					
					
					
				</div>
			</div>
		
		<div class="page">
			<a href="javascipt:;">1</a>
			<a href="javascipt:;">2</a>
			<a href="javascipt:;">3</a>
		</div>
	</body>
</html>
